<template>
    <view :style="{ '--color': color }">
        <navBar title="扣分明细"></navBar>
        <view class="allSelect">
            <text class="black size26" v-if="alltxtShow">全部</text>
            <view class="listBox">
                <view class="list" v-for="(item, index) in Filter" :key="index" v-if="item.select == 1">{{ item.name }}</view>
            </view>
            <view class="iconfont icon-a-lujing2835" @click="show = true"></view>
        </view>
        <view class="List" v-for="(item, index) in pageData" :key="index">
            <view class="ListInfo">
                <view class="OrderStaer">
                    <text class="black size28 flex-1">订单：{{ item.repair_no }}</text>
                    <view class="stateBox">
                        <view class="lis" v-for="(N, i) in item.dis_type" :key="i">{{ N }}</view>
                    </view>
                </view>
                <view class="Product">
                    <image :src="$imgUrls(item.goods_img)" mode="aspectFill" class="productImg"></image>
                    <view class="content">
                        <view class="points" v-if="item.point">
                            <text class="pointsNum">-{{ item.point }}</text>
                            <text class="h6 black m-top4">分</text>
                        </view>

                        <text class="title ellipsis">{{ item.goods_name }}</text>
                        <view class="dlin">
                            <view class="iconfont icon-shijian black size24 p-right10"></view>
                            <text class="serveTitme ellipsis">预约{{ item.service_time }}上门服务</text>
                        </view>
                        <view class="dlin" @click.stop="openLocation(item)">
                            <view class="iconfont icon-wodedizhi1 black size24 p-right10"></view>
                            <text class="serveTitme ellipsis">{{ item.address }}</text>
                        </view>
                    </view>
                </view>
            </view>
            <view class="ServerBox">
                <text class="black size28">服务时长：{{ $pop.formatSeconds(item.start_second) }}</text>
                <view class="Look" @click="lookDetails(item)">查看</view>
            </view>
        </view>

        <emptys v-if="!pageData.length"></emptys>

        <u-popup :show="show" mode="right" @close="show = false" safeAreaInsetTop>
            <view class="u-popup">
                <view class="FileterBox">
                    <view class="list">
                        <text class="title">扣分时间</text>
                        <view class="Boxs">
                            <text class="Times" @click.stop="startBtn" :class="{ black: startTime }">{{ startTime ? startTime : '开始时间' }}</text>
                            <text class="TimeLine">至</text>
                            <text class="Times" @click.stop="endBtn" :class="{ black: endTime }">{{ endTime ? endTime : '结束时间' }}</text>
                        </view>
                    </view>
                    <view class="list">
                        <text class="title">扣分原因</text>
                        <view class="reasonBox">
                            <view class="lis" @click.stop="screenCond(item)" :class="{ active: item.select == 1 }" v-for="(item, index) in Filter" :key="index">{{ item.name }}</view>
                        </view>
                    </view>
                </view>

                <view class="popFoter">
                    <view class="Btn cancel" @click="Reset">重置</view>
                    <view class="Btn config" @click="screenSearch">确定</view>
                </view>
            </view>
        </u-popup>

        <u-datetime-picker :show="showStartTime" @confirm="confirmStartTime" @cancel="showStartTime = false" v-model="value1" :maxDate="maxDate" mode="year-month"></u-datetime-picker>
        <u-datetime-picker :show="showEndTime" @confirm="confirmEndTime" @cancel="showEndTime = false" :minDate="value1" v-model="value2" :maxDate="maxDate" mode="year-month"></u-datetime-picker>
    </view>
</template>

<script>
    import { mapState } from 'vuex';
    import Api from '@/common/Api.js';
    import { computed } from 'vue';
    export default {
        data() {
            return {
                show: false,
                Selection: ['超时单', '未达成'],
                Filter: [],
                page: 1,
                LIMIT: 10,
                pageData: [],
                getMore: true,
                showStartTime: false,
                showEndTime: false,
                value1: Number(new Date()),
                value2: Number(new Date()),
                maxDate: Number(new Date()),
                startTime: '',
                endTime: '',
                //type: '1', // 1超时单 2未达成单 3售后单 4退款单
                time_line: '', // 时间区间 2025-03 - 2025-04
                out_time: '0', // 超时单  1：是 0：不是
                in_time: '0', // 未达成   1：是 0：不是
                after_order_id: '0', // 售后单   1：是 0：不是
                is_refuse: '0' // 退款单  1：是 0：不是
            };
        },
        onLoad() {
            this.PointFilter();
            this.MasterPoint();
        },
        methods: {
            MasterPoint() {
                let requestObj = {};

                this.Filter.forEach((n) => {
                    requestObj[n.key] = n.select;
                });
                console.log(requestObj, 'requestObj');
                this.$http
                    .get({
                        url: '/orderRepairApi/getMasterPointLog',
                        data: {
                            page: this.page,
                            limit: this.LIMIT,
                            time_line: this.startTime || this.endTime ? this.startTime + '-' + this.endTime : '',
                            ...requestObj
                        }
                    })
                    .then((res) => {
                        if (res.code != 200) return this.$Toast(res.msg);
                        const result = res.data || [];
                        this.page == 1 ? (this.pageData = result) : (this.pageData = [...this.pageData, ...result]);
                        if (result.length < this.pageData.length) this.getMore = false;
                    });
            },
            async PointFilter() {
                const requestResult = await Api.getMasterPointFilter();
                if (!requestResult.length) return;
                requestResult.forEach((item) => {
                    item.select = 0;
                });
                this.Filter = requestResult;
            },

            screenSearch() {
                this.page = 1;
                this.getMore = true;
                this.MasterPoint();
                this.show = false;
            },
            Reset() {
                this.startTime = '';
                this.endTime = '';
                this.Filter.forEach((item) => {
                    item.select = 0;
                });
                this.show = false;
                this.MasterPoint();
            },
            screenCond(Item) {
                Item.select = Item.select == 1 ? 0 : 1;
            },
            confirmStartTime(event) {
                console.log(event, 'event');
                this.value1 = event.value;
                this.startTime = this.convertTimestampToYearMonth(event.value);
                this.showStartTime = false;
            },
            confirmEndTime(event) {
                this.value2 = event.value;
                this.endTime = this.convertTimestampToYearMonth(event.value);
                this.showEndTime = false;
            },
            lookDetails(item) {
                this.toUrl(`/zunyi/Master/masterDetails?id=${item.repair_id}`);
            },
            startBtn() {
                this.showStartTime = true;
            },
            endBtn() {
                if (!this.startTime) return this.$Toast('请先选择开始时间');
                this.showEndTime = true;
            },
            convertTimestampToYearMonth(timestamp) {
                let date = new Date(timestamp);
                let year = date.getFullYear(); // 获取年份
                let month = ('0' + (date.getMonth() + 1)).slice(-2); // 获取月份并补零
                return year + '-' + month;
            }
        },
        computed: {
            ...mapState(['color']),
            alltxtShow() {
                return !this.Filter.some((n) => n.select == 1);
            }
        }
    };
</script>

<style lang="scss" scoped>
    .allSelect {
        width: 100%;
        height: 100rpx;
        padding-left: 24rpx;
        display: flex;
        align-items: center;
        .listBox {
            flex: 1;
            display: flex;
            .list {
                background-color: #f2f2f2;
                color: #333;
                font-size: 22rpx;
                padding: 4rpx 16rpx;
                margin-right: 10rpx;
                border-radius: 6rpx;
            }
        }
        .icon-a-lujing2835 {
            color: #999;
            font-size: 36rpx;
            padding: 20rpx;
        }
    }
    .List {
        width: 710rpx;
        background-color: #fff;
        border-radius: 10rpx;
        box-shadow: rgba(100, 100, 111, 0.2) 0px 2rpx 10rpx 0px;
        margin: 24rpx auto 0;
        .ListInfo {
            width: 100%;
            padding: 20rpx;
            .OrderStaer {
                width: 100%;
                display: flex;
                align-items: center;
                .stateBox {
                    display: flex;
                    align-items: center;
                    .lis {
                        padding: 4rpx 14rpx;
                        background-color: #f2f2f2;
                        color: #f7476d;
                        font-size: 20rpx;
                        margin-right: 10rpx;
                        border-radius: 6rpx;
                    }
                    .lis:last-child {
                        margin-right: 0;
                    }
                }
            }
            .Product {
                width: 100%;
                display: flex;
                margin-top: 24rpx;
                .productImg {
                    width: 130rpx;
                    height: 130rpx;
                    border-radius: 10rpx;
                    margin-right: 20rpx;
                }
                .content {
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    position: relative;
                    .points {
                        display: flex;
                        align-items: center;
                        position: absolute;
                        top: 20rpx;
                        right: 10rpx;
                        .pointsNum {
                            color: #000;
                            font-size: 40rpx;
                        }
                    }
                    .title {
                        color: #000;
                        font-size: 28rpx;
                        font-weight: 500;
                    }
                    .dlin {
                        display: flex;
                        align-items: center;
                        margin-top: 10rpx;
                        .serveTitme {
                            flex: 1;
                            color: #666666;
                            font-size: 24rpx;
                        }
                    }
                }
            }
        }

        .ServerBox {
            width: 100%;
            padding: 20rpx;
            border-top: 1px solid #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: space-between;
            .Look {
                width: 140rpx;
                height: 60rpx;
                background-color: var(--color);
                color: #fff;
                font-size: 26rpx;
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 30rpx;
            }
        }
    }
    .u-popup {
        width: 550rpx;
        height: 100%;
        padding: 100rpx 50rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .FileterBox {
            display: flex;
            flex-direction: column;
            flex: 1;
            .list {
                width: 100%;
                display: flex;
                flex-direction: column;
                margin-top: 40rpx;
                .title {
                    color: #000;
                    font-size: 30rpx;
                    font-weight: 500;
                }
                .Boxs {
                    width: 100%;
                    height: 80rpx;
                    display: flex;
                    align-items: center;
                    border: 1px solid #f2f2f2;
                    border-radius: 50rpx;
                    margin-top: 30rpx;
                    .TimeLine {
                        font-size: 28rpx;
                        color: #333;
                    }
                    .Times {
                        flex: 1;
                        font-size: 28rpx;
                        text-align: center;
                        color: #999;
                    }
                }
                .reasonBox {
                    width: 100%;
                    display: flex;
                    margin-top: 30rpx;
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 20rpx;
                    .lis {
                        width: 200rpx;
                        height: 70rpx;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        border: 1px solid #f2f2f2;
                        border-radius: 35rpx;
                        color: #666;
                        font-size: 26rpx;
                    }
                    .active {
                        border: 1px solid var(--color);
                        background-color: var(--color);
                        color: #fff;
                    }
                }
            }
        }

        .popFoter {
            width: 100%;
            display: flex;
            justify-content: space-between;
            .Btn {
                width: 200rpx;
                height: 70rpx;
                border-radius: 35rpx;
                display: flex;
                justify-content: center;
                align-items: center;

                font-size: 26rpx;
            }
            .cancel {
                background-color: #f2f2f2;
                color: #666;
            }
            .config {
                background-color: var(--color);
                color: #fff;
            }
        }
    }
</style>